<template>
    <div class="shop-detail">
        <Teleport to=".header">
            <Header title="商品详情"></Header>
        </Teleport>
        <div class="detail-box">
            <p>{{ goodsInfo.brand }}</p>
            <p>{{ goodsInfo.category }}</p>
            <van-text-ellipsis :content="goodsInfo.desc" expand-text="展开" collapse-text="收起" />
            <van-image width="100" height="100" :src="goodsInfo.img1" />
            <van-image width="100" height="100" :src="goodsInfo.img2" />
            <van-image width="100" height="100" :src="goodsInfo.img3" />
            <van-image width="100" height="100" :src="goodsInfo.img4" />
        </div>
    </div>
</template>
<script setup lang="ts">
import Header from '@/components/header.vue'
import { onMounted,ref } from 'vue';
import { getGoodsDetailInfo } from '@/apis/goodsList'
import { useRoute } from 'vue-router'; 
const $route = useRoute()
//准备一个变量保存详细信息
const goodsInfo = ref({})

//得到详细信息
const getGoodsDetail =async()=>{
    console.log($route.query.proid)
    const res = await getGoodsDetailInfo($route.query.proid as string)
    console.log(res)
    goodsInfo.value=res.data
}

onMounted(()=>{
getGoodsDetail()
})
</script>

<style lang="scss" scoped>
.detail-box{
    padding: 10px;
}
</style>